<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书借阅系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }
        .sidebar {
            background-color: #e9ecef;
            min-height: 100vh;
            width: 250px;
            position: fixed;
            left: 0;
            top: 0;
            padding: 20px 0;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }
        .sidebar-header {
            padding: 0 20px 20px;
            border-bottom: 1px solid #dee2e6;
        }
        .sidebar-menu {
            list-style: none;
            padding: 0;
        }
        .sidebar-menu li {
            margin-bottom: 5px;
        }
        .sidebar-menu a {
            display: block;
            padding: 12px 20px;
            color: #495057;
            text-decoration: none;
            transition: all 0.3s;
            border-radius: 5px;
        }
        .sidebar-menu a:hover {
            background-color: #dee2e6;
        }
        .sidebar-menu a.active {
            background-color: #4a90e2;
            color: white;
        }
        .main-content {
            margin-left: 250px;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #f1f3f5;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .search-bar {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .search-bar input {
            flex: 1;
            padding: 8px 15px;
            border: 1px solid #ced4da;
            border-radius: 5px;
        }
        .search-bar button {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn-primary {
            background-color: #4a90e2;
            color: white;
        }
        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
        .table-container {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
            padding: 20px;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        .table th, .table td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #dee2e6;
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        .table tr:hover {
            background-color: #f8f9fa;
        }
        .action-btn {
            padding: 4px 8px;
            margin: 0 3px;
            border-radius: 3px;
            cursor: pointer;
        }
        .btn-edit {
            background-color: #ffc107;
            color: #212529;
        }
        .btn-delete {
            background-color: #dc3545;
            color: white;
        }
        .pagination {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
        .pagination button {
            padding: 8px 12px;
            margin: 0 3px;
            border: 1px solid #dee2e6;
            background-color: white;
            border-radius: 3px;
            cursor: pointer;
        }
        .pagination button.active {
            background-color: #4a90e2;
            color: white;
            border-color: #4a90e2;
        }
    </style>
    <meta charset="utf-8">
</head>
<body>
<div class="sidebar">
    <div class="sidebar-header">
        <h4>图书借阅系统</h4>
    </div>
    <ul class="sidebar-menu">
        <li>
            <a href="#" class="active">
                <i class="bi bi-book"></i> 图书管理
            </a>
        </li>
        <li>
            <a href="#">
                <i class="bi bi-book"></i> 借阅书籍
            </a>
        </li>
        <li>
            <a href="#">
                <i class="bi bi-arrow-90deg-left"></i> 归还书籍
            </a>
        </li>
        <li>
            <a href="#">
                <i class="bi bi-search"></i> 通过ID借阅
            </a>
        </li>
        <li>
            <a href="#">
                <i class="bi bi-person-circle"></i> 管理员
            </a>
        </li>
        <li>
            <a href="#">
                <i class="bi bi-search"></i> 借阅查询
            </a>
        </li>
    </ul>
</div>

<div class="main-content">
    <div class="header">
        <h4>图书管理</h4>
        <a href="login.html" class="btn btn-secondary btn-sm">
            <i class="bi bi-box-arrow-right"></i> 退出登录
        </a>
    </div>

    <div class="search-bar">
        <div style="display: flex; align-items: center;">
            <span style="margin-right: 10px;">书名</span>
            <input type="text" id="book-name" placeholder="书名">
            <span style="margin: 0 10px;">作者</span>
            <input type="text" id="book-author" placeholder="作者">
            <button class="btn btn-primary">
                <i class="bi bi-search"></i> 查询
            </button>
            <button class="btn btn-secondary">
                <i class="bi bi-arrow-clockwise"></i> 重置
            </button>
        </div>
    </div>

    <div class="table-container">
        <div style="margin-bottom: 15px;">
            <button class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> 新增
            </button>
        </div>

        <table class="table">
            <thead>
            <tr>
                <th>编号</th>
                <th>书名</th>
                <th>作者</th>
                <th>库存</th>
                <th>单价</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 表格内容将由JavaScript动态生成 -->
            </tbody>
        </table>

        <div class="pagination">
            <span style="margin-right: 10px;">共 0 条</span>
            <span style="margin-right: 10px;">
                    <select class="form-select" style="display: inline-block; width: auto;">
                        <option>10条</option>
                        <option>20条</option>
                        <option>50条</option>
                    </select>
                </span>
            <button class="btn btn-outline-secondary btn-sm">上一页</button>
            <button class="btn btn-primary btn-sm active">1</button>
            <button class="btn btn-outline-secondary btn-sm">2</button>
            <button class="btn btn-outline-secondary btn-sm">下一页</button>
            <span style="margin-left: 10px;">前往 <input type="text" style="width: 50px; padding: 5px; text-align: center; border: 1px solid #ced4da; border-radius: 3px; margin: 0 5px;">页</span>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 获取所有书籍
    function fetchBooks() {
        const token = localStorage.getItem('token');
        fetch('/api/books/list', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    const books = data.data;
                    // 更新表格内容
                    updateBooksTable(books);
                } else {
                    console.error('获取书籍失败:', data.message);
                }
            })
            .catch(error => {
                console.error('获取书籍出错:', error);
            });
    }

    // 更新书籍表格
    function updateBooksTable(books) {
        const tbody = document.querySelector('.table tbody');
        tbody.innerHTML = '';
        books.forEach(book => {
            const row = document.createElement('tr');
            row.innerHTML = `
                    <td>${book.bookId}</td>
                    <td>${book.title}</td>
                    <td>${book.author}</td>
                    <td>${book.stock}</td>
                    <td>${book.price}</td>
                    <td>
                        <button class="action-btn btn-edit">编辑</button>
                        <button class="action-btn btn-delete">删除</button>
                    </td>
                `;
            tbody.appendChild(row);
        });
    }

    // 借阅书籍
    function borrowBook(userId, bookId) {
        const token = localStorage.getItem('token');
        fetch('/api/books/borrow', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`
            },
            params: {
                userId: userId,
                bookId: bookId
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert('借书成功！');
                    fetchBooks(); // 刷新书籍列表
                } else {
                    alert('借书失败，请稍后再试。');
                }
            })
            .catch(error => {
                console.error('借书请求出错:', error);
                alert('借书请求出错，请稍后再试。');
            });
    }

    // 归还书籍
    function returnBook(userId, bookId, overdueDays) {
        const token = localStorage.getItem('token');
        fetch('/api/books/return', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`
            },
            params: {
                userId: userId,
                bookId: bookId,
                overdueDays: overdueDays
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert(`归还成功，逾期费用: ${data.data} 元`);
                    fetchBooks(); // 刷新书籍列表
                } else {
                    alert('归还失败，请稍后再试。');
                }
            })
            .catch(error => {
                console.error('归还请求出错:', error);
                alert('归还请求出错，请稍后再试。');
            });
    }

    // 通过ID借阅书籍
    function borrowBookById(userId, bookId) {
        const token = localStorage.getItem('token');
        fetch('/api/books/borrowById', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`
            },
            params: {
                userId: userId,
                bookId: bookId
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert('借书成功！');
                    fetchBooks(); // 刷新书籍列表
                } else {
                    alert('借书失败，请稍后再试。');
                }
            })
            .catch(error => {
                console.error('借书请求出错:', error);
                alert('借书请求出错，请稍后再试。');
            });
    }

    // 获取所有借书记录（管理员接口）
    function getAllBorrowRecords(page, size) {
        const token = localStorage.getItem('token');
        fetch(`/api/admin/borrow-records?page=${page}&size=${size}`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    const records = data.data;
                    // 更新记录表格
                    updateRecordsTable(records);
                } else {
                    console.error('获取借书记录失败:', data.message);
                }
            })
            .catch(error => {
                console.error('获取借书记录出错:', error);
            });
    }

    // 页面加载时获取书籍列表
    window.onload = function() {
        const token = localStorage.getItem('token');
        if (!token) {
            window.location.href = 'login.html'; // 如果没有登录，跳转到登录页面
        }
        fetchBooks();
    };

    // 为表格中的操作按钮添加事件监听器
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('btn-edit')) {
            const row = e.target.closest('tr');
            const bookId = row.cells[0].textContent;
            alert(`编辑书籍，ID: ${bookId}`);
            // 添加编辑书籍的逻辑
        } else if (e.target.classList.contains('btn-delete')) {
            const row = e.target.closest('tr');
            const bookId = row.cells[0].textContent;
            if (confirm(`确定要删除书籍，ID: ${bookId} 吗？`)) {
                alert(`删除书籍，ID: ${bookId}`);
                // 添加删除书籍的逻辑
                row.remove();
            }
        }
    });

    // 查询按钮点击事件
    document.querySelector('.search-bar .btn-primary').addEventListener('click', function() {
        const bookName = document.getElementById('book-name').value;
        const bookAuthor = document.getElementById('book-author').value;
        console.log('Searching for books:', bookName, bookAuthor);
        // 添加查询逻辑
        alert(`正在查询书名包含"${bookName}"，作者包含"${bookAuthor}"的书籍`);
    });

    // 重置按钮点击事件
    document.querySelector('.search-bar .btn-secondary').addEventListener('click', function() {
        document.getElementById('book-name').value = '';
        document.getElementById('book-author').value = '';
        console.log('Reset search criteria');
        fetchBooks();
    });

    // 新增按钮点击事件
    document.querySelector('.btn-primary').addEventListener('click', function() {
        alert('新增书籍');
        // 添加新增书籍的逻辑
    });

    // 左侧菜单点击事件
    document.querySelectorAll('.sidebar-menu a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelectorAll('.sidebar-menu a').forEach(item => {
                item.classList.remove('active');
            });
            this.classList.add('active');
            const menuItem = this.textContent.trim();
            console.log('Selected menu item:', menuItem);
            // 添加页面切换逻辑
            alert(`你选择了"${menuItem}"菜单`);
        });
    });
</script>
</body>
</html>